<template>
    <!-- 复合饼图 -->
    <div id="pieMap" style="width: 100%;height: 500px ;"> </div>
</template>
<script>
import * as echarts from 'echarts';
export default {
    data() {
        return {

        }
    },
    mounted() {
        this.drawMap()
    },
    methods: {
        drawMap() {
            let myChart = echarts.init(document.getElementById('pieMap'));
            let markLineData = []
            let source = [
                ['product', '2015', '2016'],
                ['轨道交通', 745],
                ['航天航空', 212],
                ['新兴金融', 1226],
                ['高端商务', 24079],
                ['数字经济', 7708],
                ['智能建造', 3782],
                ['商用密码', 155],
                ['综合能源管理', 2642],
                ['都市智慧农业', 2189],
                ['智慧医疗', 1909],
                ['智能制造装备', 2642],
                ['新材料', 31991],
                ['科学研究和技术服务业', 25380],
                ['批发和零售业', 19131],
                ['居民服务、修理和其他服务业', 3038],
                ['水利、环境和公共设施管理业', 1139],
                ['文化、体育和娱乐业', 329],
                ['教育', 234],
                ['住宿和餐饮业', 3952],
                ['农、林、牧、渔业', 28],
            ]
            // 添加“其他”
            addOtherData(source, 8);
            let option = {
                // 定义饼图颜色
                color: [
                    '#293890',
                    '#f1b656',
                    '#397fc7',
                    '#734e9c',
                    '#f6631c',
                    '#d4242a',
                    '#ff9a9b',
                    '#9998ff',
                    '#2c91e0',
                    '#3abf99',
                    '#f0a73a',
                    '#a4e048',
                    '#0d5ef9',
                    '#1f75fd',
                    '#358bff',
                    '#0c66e0',
                    '#599bff',
                    '#0b5de8',
                    '#0d79ff',
                    '#2a85fd',
                    '#276dd9'
                ],
                tooltip: {},
                legend: [
                    {
                        orient: 'horizontal',
                        left: '5%',
                        top: '5%',
                        itemGap: 10,
                        align: 'left',
                        data: ['轨道交通', '航天航空', '新兴金融', '高端商务', '数字经济', '智能建造', '商用密码', '综合能源管理', '都市智慧农业', '智慧医疗', '智能制造装备', '新材料', '其他']
                    },
                    {
                        orient: 'horizontal',
                        right: '5%',
                        bottom: '15%',
                        itemGap: 10,
                        align: 'right',
                        data: ['科学研究和技术服务业', '批发和零售业', '居民服务、修理和其他服务业', '水利、环境和公共设施管理业']
                    },
                    {
                        orient: 'horizontal',
                        right: '5%',
                        bottom: '10%',
                        itemGap: 10,
                        align: 'right',
                        data: ['文化、体育和娱乐业', '教育', '住宿和餐饮业']
                    }
                ],
                dataset: {
                    source: source
                },
                series: [
                    {
                        name: '丰台区企业产业分布',
                        type: 'pie',
                        radius: "50%",
                        center: ['25%', '50%'],
                        label: {
                            show: true,
                            position: "inside",
                            color: '#fff'
                        },
                        startAngle: 45, // 起始角度 45 
                        clockwise: false, // 逆时针 
                        markLine: {
                            lineStyle: {
                                type: 'solid',
                                color: "#BFBFBF"
                            },
                            symbol: 'none',
                            data: markLineData
                        }
                    },
                    {
                        name: '丰台区非核心产业分布',
                        type: 'pie',
                        radius: "30%",
                        center: ['75%', '50%'],
                        encode: {
                            itemName: 'product',
                            value: '2016',
                        },
                        label: {
                            show: true,
                            position: "inside",
                            color: '#fff'
                        },
                    }
                ]
            };
            // 获取表标线 对应点坐标
            function getMarkLineData(percent) {
                // 1.获取画布 width,height
                let height = myChart.getHeight()
                let width = myChart.getWidth()

                // 2.  根据 series[0].center 获取圆心坐标
                let x0 = width * 0.25 // 圆心x轴坐标

                // “其他” 终点坐标series[0].startAngle 45
                let x1 = x0 + (height / 4) * Math.cos(45 * 3.14 / 180)
                let y1 = (height * 0.5) - (height / 4) * Math.sin(45 * 3.14 / 180)

                let ao = 360 * (percent / 100) // 扇形角度

                let ao1 = 0 // 用来计算的坐标角度
                ao1 = (ao <= 45) ? (45 - ao) : (360 - (ao - 45))
                if (ao1 < 270 && ao1 > 45) ao1 = 270 // 角度当270用，要不样式不好看

                let x2 = 0, y2 = 0;
                x2 = x0 + (height / 4) * Math.cos(ao1 * 3.14 / 180)
                y2 = (height * 0.5) - (height / 4) * Math.sin(ao1 * 3.14 / 180)

                return [[{ x: x1, y: y1 }, { x: "75%", y: "35%" }], [{ x: x2, y: y2 }, { x: "75%", y: "65%" }]]
            }
            // 添加其他 
            function addOtherData(datasetSource, len) {
                let percent = 0
                let sum = 0 // 总计
                datasetSource.forEach((data, rowIndex) => {
                    if (rowIndex > 0) { // 第一行数据不算
                        let count = 0
                        for (let key of data) {
                            let value = isNaN(key) ? 0 : Number(key)
                            if (count === 1) sum += value
                            count++
                        }
                    }
                })
                let endData = datasetSource.slice(datasetSource.length - len)
                let other = ["其他"]
                for (let i = 0; i < endData.length; i++) {
                    let j = 0;
                    for (let key of endData[i]) {
                        let value = isNaN(key) ? 0 : key
                        if (j) other[j] ? (other[j] += value) : other.push(value)
                        j++
                    }
                    endData[i].splice(1, 0, "")
                }
                datasetSource.push(other)
                // "其他"占比
                percent = sum ? ((other[1] / sum) * 100).toFixed(2) : 100
                markLineData = getMarkLineData(percent)
            }
            myChart.setOption(option);

        }
    }
}
</script>

<style scoped></style>